/*
 * @Descripttion : 进度条
 * @Author       : QianFox Team
 * @Date         : 2022-09-29 10:52:48
 * @LastEditors  : QianFox Team
 * @LastEditTime : 2022-09-30 15:33:35
 */

import { _foxId } from './common/variables';

/**
 * @description: 进度条构造函数
 * @param {*} el                   进度条容器节点
 * @param {*} percent              进度值 （0~100）
 * @param {*} type                 进度条类型： 1、line， 2、circle， 3、dashboard
 * @param {*} striped              是否有条纹(只在 type 为 line 时可有)
 * @param {*} animated             是否让条纹带动画(只在 type 为 line 时可有)
 * @param {*} strokeWidth          条纹高度
 * @param {*} strokeColor          条纹色
 * @param {*} bgColor              条纹背景色
 * @param {*} strokeLinecap        进度条两端的形状： 1、round， 2、square，
 * @param {*} showText             是否显示百分比文字
 * @param {*} textInside           是否让文字放在进度条内部(只在 type 为 line 时可有)
 * @param {*} width                宽度(只在 type 为 circle 或 dashboard 时可有)
 * @return {*}
 * @Date: 2022-09-29 16:23:30
 */
function Progress({ el, percent, type, striped, animated, strokeWidth, strokeColor, bgColor, strokeLinecap, showText, textInside, width }) {
    // 组件内使用
    this.foxId = `foxid${_foxId()}`;

    // 传入数据及配置
    this.el = el;
    this.percent = percent || 0;
    this.type = type || 'line';
    this.strokeWidth = strokeWidth || (this.type === 'line' ? 8 : 6);
    this.strokeColor = strokeColor || '';
    this.bgColor = bgColor || '';
    this.strokeLinecap = strokeLinecap === 'square' ? 'square' : strokeLinecap === 'butt' ? 'butt' : 'round';
    this.showText = showText === false ? false : true;
    this.textInside = textInside || false;
    this.striped = striped || false;
    this.animated = animated || false;
    this.width = width || 120;

    this.CONTAINER = '.foxui-progress';
    this.LINE_INNER = '.foxui-progress-line__inner';
    this.LINE_TEXT = '.foxui-progress__text';
    this.LINE_INNERTEXT = '.foxui-progress-line__innerText';
    this.CIRCLE_PATH = '.foxui-progress-circle__path';
}

/**
 * @description: 初始化
 * @return {*}
 * @Date: 2022-09-30 08:41:36
 */
Progress.prototype._init = function () {
    this._appendHtml();
};

/**
 * @description: 条形进度条 html
 * @return {*}
 * @Date: 2022-09-29 16:49:30
 */
Progress.prototype._progressLineHtml = function () {
    return [
        `<div class="foxui-progress foxui-progress-type__line" data-foxid=${this.foxId}>`,
        '<div class="foxui-progress-line">',
        `<div class="foxui-progress-line__outer" style="${this.strokeWidth ? 'height:' + this.strokeWidth + 'px;' : ''}${this.bgColor ? 'background-color:' + this.bgColor + ';' : ''}${
            this.strokeLinecap === 'square' ? 'border-radius:0;' : this.strokeLinecap === 'butt' ? 'border-radius:3px;' : ''
        }">`,
        `<div class="foxui-progress-line__inner${this.striped ? ' foxui-progress-line__striped' : ''}${this.animated ? ' foxui-progress-line__animated' : ''}" style="width:${this.percent}%; ${
            this.strokeColor ? 'background-color:' + this.strokeColor + ';' : ''
        }${this.strokeLinecap === 'square' ? 'border-radius:0;' : this.strokeLinecap === 'butt' ? 'border-radius:3px;' : ''}">`,
        `${this.textInside ? this._lineTextHtml() : ''}`,
        '</div>',
        '</div>',
        '</div>',
        `${this.textInside ? '' : this._lineTextHtml()}`,
        '</div>',
    ].join('');
};

/**
 * @description: 条形进度条文字 html
 * @return {*}
 * @Date: 2022-09-29 16:48:53
 */
Progress.prototype._lineTextHtml = function () {
    let textHtml = '';
    if (this.showText) {
        if (this.textInside) {
            textHtml = `<div class="foxui-progress-line__innerText">${this.percent}%</div>`;
        } else {
            textHtml = `<div class="foxui-progress__text">${this.percent}%</div>`;
        }
    }
    return textHtml;
};

/**
 * @description: 圆形进度条 html
 * @return {*}
 * @Date: 2022-09-30 11:08:51
 */
Progress.prototype._progressCircleHtml = function () {
    return [
        `<div class="foxui-progress foxui-progress-type__circle" data-foxid=${this.foxId}>`,
        `<div class="foxui-progress-circle" style="height:${this.width}px; width:${this.width}px">`,
        '<svg viewBox="0 0 100 100">',
        '<path d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" ',
        `stroke-width="${this.strokeWidth}" fill="none" `,
        'class="foxui-progress-circle__track" ',
        `style="stroke-dasharray:295.31px,295.31px; stroke-dashoffset:0px;${this.bgColor ? ' stroke:' + this.bgColor : ''}"`,
        '></path>',
        '<path d="M 50 50 m 0 -47 a 47 47 0 1 1 0 94 a 47 47 0 1 1 0 -94" ',
        `fill="none" stroke-linecap="${this.strokeLinecap}" stroke-width="${this.strokeWidth}" `,
        'class="foxui-progress-circle__path" ',
        `style="stroke-dasharray:${(295.31 * this.percent) / 100}px,295.31px; stroke-dashoffset:0px; transition:stroke-dasharray 0.6s ease 0s,stroke 0.6s ease 0s;${
            this.strokeColor ? ' stroke:' + this.strokeColor : ''
        }"`,
        '></path>',
        '</svg>',
        '</div>',
        `${this._circleTextHtml()}`,
        '</div>',
    ].join('');
};

/**
 * @description: 仪表盘进度条
 * @return {*}
 * @Date: 2022-09-30 15:34:08
 */
Progress.prototype._progressDashboardHtml = function () {
    return [
        `<div class="foxui-progress foxui-progress-type__dashboard" data-foxid=${this.foxId}>`,
        `<div class="foxui-progress-circle" style="height:${this.width}px; width:${this.width}px">`,
        '<svg viewBox="0 0 100 100">',
        '<path d="M 50 50 m 0 47 a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 94" ',
        `stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}" fill="none" `,
        'class="foxui-progress-circle__track" ',
        `style="stroke-dasharray: 221.482px, 295.31px; stroke-dashoffset: -36.9137px;${this.bgColor ? ' stroke:' + this.bgColor : ''}"`,
        '></path>',
        '<path d="M 50 50 m 0 47 a 47 47 0 1 1 0 -94 a 47 47 0 1 1 0 94" ',
        `stroke="#f56c6c" fill="none" stroke-linecap="${this.strokeLinecap}" stroke-width="${this.strokeWidth}" `,
        'class="foxui-progress-circle__path" ',
        `style="stroke-dasharray: ${(221.482 * this.percent) / 100}px,295.31px; stroke-dashoffset:-36.9137px; transition:stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;${
            this.strokeColor ? ' stroke:' + this.strokeColor : ''
        }"`,
        '></path>',
        '</svg>',
        '</div>',
        `${this._circleTextHtml()}`,
        '</div>',
    ].join('');
};

/**
 * @description: 圆形进度条文字 html
 * @return {*}
 * @Date: 2022-09-30 13:55:21
 */
Progress.prototype._circleTextHtml = function () {
    let textHtml = '';
    if (this.showText) {
        textHtml = `<div class="foxui-progress__text">${this.percent}%</div>`;
    }
    return textHtml;
};

/**
 * @description: 追加进度条 html 节点至容器
 * @return {*}
 * @Date: 2022-09-29 16:50:15
 */
Progress.prototype._appendHtml = function () {
    let html = '';
    if (this.type === 'line') {
        html = this._progressLineHtml();
    } else if (this.type === 'circle') {
        html = this._progressCircleHtml();
    } else if (this.type === 'dashboard') {
        html = this._progressDashboardHtml();
    }
    $(this.el).append(html);
};

/**
 * @description: 更新进度
 * @param {*} percent
 * @return {*}
 * @Date: 2022-09-30 12:15:53
 */
Progress.prototype.update = function (percent) {
    let $container = $(`${this.CONTAINER}[data-foxid=${this.foxId}]`);
    if (this.type === 'line') {
        $container.find(this.LINE_INNER).css('width', `${percent}%`);
        if (this.showText) {
            if (this.textInside) {
                $container.find(this.LINE_INNERTEXT).text(`${percent}%`);
            } else {
                $container.find(this.LINE_TEXT).text(`${percent}%`);
            }
        }
    } else if (this.type === 'circle') {
        $container.find(this.CIRCLE_PATH).css('stroke-dasharray', `${(295.31 * percent) / 100}px,295.31px`);
        $container.find(this.LINE_TEXT).text(`${percent}%`);
    } else if (this.type === 'dashboard') {
        $container.find(this.CIRCLE_PATH).css('stroke-dasharray', `${(221.482 * percent) / 100}px,295.31px`);
        $container.find(this.LINE_TEXT).text(`${percent}%`);
    }
};

/**
 * @description: 实例化 progress
 * @param {*} el
 * @param {*} percent
 * @param {*} type
 * @param {*} striped
 * @param {*} animated
 * @param {*} strokeWidth
 * @param {*} strokeColor
 * @param {*} bgColor
 * @param {*} strokeLinecap
 * @param {*} showText
 * @param {*} textInside
 * @param {*} width
 * @return {*}
 * @Date: 2022-09-30 12:15:17
 */
function progress({ el, percent, type, striped, animated, strokeWidth, strokeColor, bgColor, strokeLinecap, showText, textInside, width }) {
    let progress = new Progress({ el, percent, type, striped, animated, strokeWidth, bgColor, strokeColor, strokeLinecap, showText, textInside, width });
    progress._init();
    return progress;
}

export { progress };
